<template>
    <view>
        <u-navbar :is-back="false" title="我的收藏" :background="background" title-color="#efefef">
            <view>
                <view class="left" @click="returnPrevious()">
                    <u-icon name="arrow-left" color="#efefef" size="40"></u-icon>
                    <!-- fanhui -->
                </view>
            

            <view class="top">
                
                <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#ff0000">
                </u-tabs>
            </view>
            </view>
        </u-navbar>
        <view class="wrap">

            <!-- <u-tabs-swiper ref="tabs" name="cate_name" :list="list" :is-scroll="false"></u-tabs-swiper> -->
            <!-- <u-sticky offset-top="180"> -->
            <!-- 只能有一个根元素 -->

            <!-- </u-sticky> -->




            <view class="content" v-if="current==0">
                <view class="nolist" v-if="siteList.length==0">
                    暂无数据
                </view>
                <view v-for="item in siteList" :key="item.id">
                    <view class="box" @click="goToOne(1,item.id)">
                        <view class="u-body-item u-flex">
                            <view class="main">
                                <view class="title u-line-2">{{ item.siteTitle }}</view>
                                <!--                    <view class="brief u-line-2">浙南（平阳）抗日根据地旧址
                        瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半
                        </view> -->
                                <view class="footer">
                                    <view class="siteauthor">{{item.siteAuthor}} </view>
                                    <view class="sitetime">{{item.updateTime}}</view>
                                </view>

                            </view>

                            <image :src="filePath+item.cover" mode="aspectFill" @error="error(1,index)"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="content" v-if="current==1">
                <view class="nolist" v-if="personageList.length==0">
                    暂无数据
                </view>
                <view v-for="(item,index) in personageList" :key="item.id">
                    <view class="box" @click="test()">
                        <view class="u-body-item u-flex">
                            <view class="main">
                                <view class="title u-line-2">{{ item.personageName }}</view>
                                <!--                    <view class="brief u-line-2">浙南（平阳）抗日根据地旧址
                            瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半
                            </view> -->
                                <view class="footer">
                                    <view class="siteauthor">{{item.personageEditor}} </view>
                                    <view class="sitetime">{{item.updateTime}}</view>
                                </view>
            
                            </view>
            
                            <image :src="filePath+item.cover" mode="aspectFill" @error="error(2,index)"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="content" v-if="current==2">
                <view class="nolist" v-if="travelList.length==0">
                    暂无数据
                </view>
                <view v-for="(item,index) in travelList" :key="item.id">
                    <view class="box" @click="goToOne(3,item.id)">
                        <view class="u-body-item u-flex">
                            <view class="travelmain">
                                <view class="traveltitle u-line-2">{{ item.travelTitle }}</view>
                                <!--                    <view class="brief u-line-2">浙南（平阳）抗日根据地旧址
                            瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半
                            </view> -->
                                <view class="footer">
                                    <view class="siteauthor">{{item.travelAuthor}} </view>
                                    <view class="sitetime">{{item.updateTime}}</view>
                                </view>
            
                            </view>
            
                            <!-- <image :src="filePath+item.cover" mode="aspectFill" @error="error(index)"></image> -->
                        </view>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    import {
        getEvents,
        getSites,
        getPersonages,
        getAttentionSites,
        getAttentionPersonages,
        getAttentionTravels
    } from "@/api/data.js"
    import {
        FIlE_PATH
    } from "@/common/index.js"
    export default {
        data() {
            return {
                background: {
                    // backgroundColor: '#ffffff',
                    backgroundImage: 'linear-gradient(45deg, rgb(255, 40, 0), rgb(147, 0, 0))'
                },
                list: [{
                    name: '红色基地'
                }, {
                    name: '伟人烈士'
                }, {
                    name: '游记新闻',
                }],
                current: 0,
                siteList: [],
                personageList: [],
                travelList: [],
                filePath: '',
                userId:0,
            }
        },
        onLoad(options) {
            this.userId = options.userId
            console.log(this.userId)
        },
        onShow() {
            this.getSiteList()
            this.getPersonageList()
            this.getAttentionTravels()
            this.filePath = FIlE_PATH
        },
        methods: {
            change(index) {
                this.current = index;
                console.log(index)
            },
            getSiteList() {
                const _this = this
                getAttentionSites({
                    userId:this.userId
                }).then(function(res) {
                    _this.siteList = res.data.data
                    console.log(res.data)
                })
            },
            error(type,index) {
                if(type == 1 )
                // console.log(index)
                this.siteList[index]['cover'] = this.src
                if(type == 2)
                this.personageList[index]['cover'] = this.src
                // if(type==3)
                
            },
            getPersonageList() {
                const _this = this
                getAttentionPersonages({
                    userId :this.userId
                }).then(function(res) {
                    _this.personageList = res.data.data
                    // console.log(_this.siteList)
                })
            },
            getAttentionTravels(){
                const _this = this
                getAttentionTravels({
                    userId :this.userId
                }).then(function(res) {
                    _this.travelList = res.data.data
                    // console.log(_this.siteList)
                })
            },
            returnPrevious(){
                uni.navigateBack({
                    delta: 1
                });
            },
            goToOne(type,id) {
                console.log(id)
                uni.navigateTo({
                    url: '/pages/articles/index?id='+id+'&type='+type,
                });
            
            },
            
        }
    }
</script>

<style lang="scss" scoped>
    .left {
        float: left;
        margin-left: 30rpx;
        margin-top: 100rpx;
    }

    .top {
        width: 750rpx;
        // margin: 0 auto;
        margin-top: 150rpx;

    }

    .wrap {
        display: flex;
        flex-direction: column;
        // height: 100vh;
        min-height: calc(100vh - var(--window-top));
        width: 100%;
        background-color: #e6e6e6;
        margin-top: 80rpx;
        // background-color: #fff9ee;
    }

    .content {
        width: 720rpx;
        margin: 0 auto;
    }

    .box {
        padding: 30rpx;
        // margin-top: 30rpx;
        margin-top: 20rpx;
        background: #fff;
        border: 3rpx solid #ddd;
        border-radius: 20rpx;
    }

    .u-body-item {
        // font-size: 28rpx;
        color: #424242;
    }

    .u-body-item image {
        width: 220rpx;
        flex: 0 0 40%;
        height: 200rpx;
        border-radius: 8rpx;
        margin-left: 12rpx;
    }

    .title {
        font-size: 38rpx;
        font-weight: bold;
        margin-bottom: 50rpx;
        height: 100rpx;
        color: #515151;
        // height: 60%;
        // width: 70%;

    }
    .traveltitle{
        font-size: 38rpx;
        font-weight: bold;
        margin-bottom: 50rpx;
        max-height: 120rpx;
        color: #515151;
        // height: 60%;
        // width: 70%;

    }

    .brief {
        font-size: 28rpx;
        color: #8e8e8e;
        margin-bottom: 10rpx;
    }

    .footer {

        // font-size: 30rpx;
        // color: #747474;
        .siteauthor {
            display: inline-block;
            font-size: 30rpx;
            color: #5a5a5a;
        }

        .sitetime {
            display: inline-block;
            font-size: 28rpx;
            color: #747474;
            margin-left: 20rpx;
        }

        // height: 20%;
    }

    .main {
        flex: 0 0 60%;
    }
    .travelmain{
        flex: 0 0 1;
    }
    .nolist {
        font-size: 50rpx;
        margin: 200rpx auto;
        width: 750rpx;
        text-align: center;
        color: #3F536E;
    }
</style>
